<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帖子详情</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.filer.css">
    <link rel="stylesheet" href="../assets/css/weui.min.css">
    <link rel="stylesheet" href="../assets/css/jquery-weui.min.css">
    <link rel="stylesheet" href="../assets/css/iconfont1/iconfont.css"/>
    <style type="text/css">
        body{
            background: #084779;
        }
        /*img{*/
            /*width: auto;*/
            /*height: auto;*/
        /*}*/
        .top{
            width: 100%;
            height: 80px;
            background: url('image/header.png') no-repeat;
        }
        .main{
            background: white;
            width: 500px;
            margin: 0 auto;
            padding: 50px 20px;
        }
        .main .header{
            height: 100px;
        }
        .main .header .headerImg{
            width: 20%;
            height: 80%;
            float: left;
        }
        .main .header .headerImg img{
            height:100%;
        }
        .main .header .info{
            height:100%;
            width: 75%;
            float: right;
            padding-top: 10px;
        }
        .main .txtContent{
            border-top: 1px solid #666;
        }
        .main .txtContent p{
            line-height: 30px;
            text-indent: 2em;
        }
        .main .txtContent .group{
            border:1px solid #ccc;
            margin-bottom: 20px;
            margin-left: 30px;
        }
        .main .resourceContent{
            border-top: 1px solid #666;
        }
        .main .resourceContent ul{
            overflow: hidden;
        }
        .main .about{
            border-top: 1px solid #666;
            padding: 10px 0;
        }
        .main .about ul{
            overflow: hidden;
            margin-bottom: 0;
        }
        .main .about ul li {
            float: left;
            width: 33.33%;
            text-align: center;
        }
        .main .about ul li p{
            margin: 0;
        }
        .main .about ul li i {
            vertical-align: middle;
        }

        /*修改文件显示原样式*/
        .jFiler-item-thumb-image{
            height: 200px;
            width: 200px;
            text-align: center;
            /*line-height: 250px;*/
            /*border: 1px solid;*/
            padding: 10px;
        }
        .jFiler-items-grid .jFiler-item{
            width: 100%;
        }
        .jFiler-item jFiler-no-thumbnail{
            width: 100%;
        }
        .jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-thumb{
            width: 100%;
            height:212px;
        }
        .jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-thumb span.jFiler-icon-file{
            margin-top: 65px;
        }
        /*评论部分*/
        .comment{
            border-top: 1px solid #666;
        }
        .comment .headerImg img{
            width: 50px;
        }
        .comment .NoComment{
            width: 50%;
            margin: 0 auto;
        }
        .comment .NoCommetText{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="top">

    </div>
    <div class="main">
        <div class="header">
            <div class="headerImg">
                <!--<img src="" alt="">-->
            </div>
            <div class="info">
                <p class="name"></p>
                <p>
                    <span class="time"></span>
                    <span class="address"></span>
                    <span class="type"></span>
                </p>
            </div>
        </div>
        <div class="txtContent">
            <h4>内容</h4>
            <p class="text"></p>
            <div class="group" style="display: none;">
                <p class="groupName"></p>
                <p><span class="groupType"></span><span class="groupNumber"></span></p>
            </div>
        </div>
        <div class="newsDetail">

        </div>
        <div class="shareContent" style="display: none;border: 1px solid #ccc;padding: 10px;margin-bottom: 20px;">
            <h4>分享内容</h4>
            <div style="overflow:hidden;">
                <div class="shareHeaderImg" style="float: left;width: 50px;height: 50px;">

                </div>
                <div class="shareUser" style="float: left;">
                    <p class="shareUserName"></p>
                    <p class="shareAddress"></p>
                </div>
            </div>
            <p class="shareText" style="text-indent: 2em;"></p>
            <div class="shareResourceContent" style="display: none;">
                <h4>媒体资源</h4>
                <ul class="jFiler-items-list jFiler-items-grid" style="overflow: hidden;">

                </ul>
            </div>
        </div>
        <div class="resourceContent" style="display: none;">
            <h4>媒体资源</h4>
                <ul class="jFiler-items-list jFiler-items-grid" style="overflow: hidden;">

                </ul>
        </div>
        <div class="about">
            <ul>
                <li class="likeCount"><p><i class="icon iconfont icon-zan-copy"></i><span></span></p></li>
                <li class="commonCount"><p><i class="icon iconfont icon-pinglun"></i><span></span></p></li>
                <li class="shareCount"><p><i class="icon iconfont icon-fenxiang"></i><span></span></p></li>
            </ul>
        </div>
        <div class="comment">
            <h4>评论</h4>
            <div class="commentHeader">
                <i class="icon iconfont icon-tubiao15"></i>&nbsp;&nbsp;<span class="commentNum">当前3条评论</span>
            </div>
            <div class="empty"></div>
        </div>
    </div>

    <script type="text/html" id="reasource">
        <li class="jFiler-item jFiler-no-thumbnail">
            <div class="jFiler-item-container">
                <div class="jFiler-item-inner">
                    <div class="jFiler-item-thumb">
                        <div class="jFiler-item-status">

                        </div>
                        <div class="jFiler-item-info">
                           <span class="jFiler-item-title"><b>reasourceName</b></span>
                        </div>
                        <div class="jFiler-item-thumb-image">
                            reasourceImg
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </script>
    <script id="commentTemp" type="text/html">
        <div class="commentBody" style="margin-bottom: 20px;">
            <div class="weui-flex commentEditor">
                <div class="headerImg" style="width: 50px;height: 50px;background: url('image/headerImg03.png') no-repeat;background-size: 100% 100%;"></div>
                <div class="weui-flex__item" style="padding-left: 20px;">
                    <p style="margin: 0"><span>用户昵称01</span></p>
                    <p class="time" style="margin: 0">10分钟前</p>
                </div>
                <div class="likeInfo">
                    <span><i class="icon iconfont icon-zan"></i></span><span>likeNum</span>
                </div>
            </div>
            <div class="commentContent">
                <p style="font-size: 14px;padding-left: 20px;">content1</p>
                <div class="commentImg">
                    <img src="defaultImg" alt="">
                </div>
                <div class="reply" style="margin-left: 40px;border: 1px solid #ccc;padding-left: 10px;">回复</div>
            </div>
        </div>
    </script>


    <script src="../assets/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        var str=location.href;
        var idList1 = str.split('?')[1];
        var forumMsgId = idList1.split('&')[0].split('=')[1],
               userId =  idList1.split('&')[1].split('=')[1];
        getForumInfo(forumMsgId, userId);
//        if (idList1 === undefined) {
//            var data =JSON.parse(localStorage.fatie);
//            if (localStorage.shareTie) {
//                $(".resourceContent").css('display','none');
//                $(".shareContent").css('display','block');
////            渲染分享帖子的数据
//            }else {
//                $(".resourceContent").css('display','block');
//                $(".shareContent").css('display','none');
//            };
//            updata(data);
//        } else {
//            var id = idList1.split('=')[1];
//            getForumInfo(id);
//        }
//        getForumInfo('14a2b9e1892a4471a6cd734fafbc8639');
        /*
         * 查询帖子详情
         */
        function getForumInfo(forumMsgId, userId) {
            return $.ajax({
                url: '/community/forummessage/getForumMsgDetail?forumMsgId=' + forumMsgId + '&userId=' + userId,
                type: 'GET',
                cache: false,
                success: function (resp) {
                    console.log(resp);
                    if(resp.success) {
                        var data = resp.data;
                        $(".headerImg").css({"background": "url("+data.userHeadUrl+") no-repeat","backgroundSize": "100% 100%"});
                        $(".info .name").html(data.nickName);
                        $(".info .address").html(data.postionLabel);
                        $(".about .likeCount p span").html(data.likesCount+'次点赞');
                        $(".about .commonCount p span").html(data.commentCount+'次评论');
                        $(".about .shareCount p span").html(data.shareCount+'次分享');
                        $(".txtContent .text").html(data.msgContent == "null" ? ' ' :data.msgContent);
                        updata(data, 'resourceContent');
                        //            是否群组帖
                        if(data.msgType === 'shareGroup') {
                            $('.group').css('display','block');
                            $('.groupName').html(data.shareForumgroup.groupName);
                            var obj = {'10000':'公开','10001':'封闭','10002':'私密'};
                            $('.groupType').html(obj[data.shareForumgroup.privacySetting] + "群组&nbsp;&nbsp;");
                            $('.groupNumber').html(data.shareForumgroup.memberCount + "位成员");
                        }else if(data.msgType === "shareNews") {
                            if(data.cmfPostsListVo.tpl === 'article_news') {
                                $('.main .newsDetail').append("<h3>"+data.cmfPostsListVo.postTitle+"</h3><div>"+data.cmfPostsListVo.postContent+"</div>");
                            }else if(data.cmfPostsListVo.tpl === 'article_video') {
                                $('.main .newsDetail').append("<h3>"+data.cmfPostsListVo.postTitle+"</h3><div><video controls style='width: 100%;' src="+JSON.parse(resp.data.cmfPostsListVo.postContent).video_url+"></video></div>");
                            }else if(data.cmfPostsListVo.tpl === 'article_pics_list') {
                                $('.main .newsDetail').append("<h3>"+data.cmfPostsListVo.postTitle+"</h3><div><img style='width: 100%;' src="+JSON.parse(resp.data.cmfPostsListVo.postContent).img_news+"></div>");
                            }else if(data.cmfPostsListVo.tpl === 'article_pics') {
                                var html = '';
                                var news = JSON.parse(resp.data.cmfPostsListVo.postContent).img_news;
                                for(var i = 0; i < news.length; i++) {
                                    html += "<img style='width: 100%;' src="+news[i].img+">";
                                };
                                $('.main .newsDetail').append("<h3>"+data.cmfPostsListVo.postTitle+"</h3><div>"+html+"</div>");
                            }
                        }else {
                            if(data.sourceId && data.msgSourceType != 'groupMsg') {
                                $.ajax({
                                    url: '/community/forummessage/getForumMsgDetail?forumMsgId=' + data.sourceId +'&userId=' + userId,
                                    type: 'GET',
                                    cache: false,
                                    success:function (resp) {
                                        if(resp.success) {
                                            $(".shareContent").css('display','block');
                                            $(".shareHeaderImg").css({"background": "url("+resp.data.userHeadUrl+") no-repeat","backgroundSize": "100% 100%"});
                                            $(".shareUserName").html(resp.data.nickName);
                                            $(".shareAddress").html(resp.data.postionLabel);
                                            $('.shareText').html(resp.data.msgContent == null ? '' : resp.data.msgContent);
                                            updata(resp.data, 'shareResourceContent');
                                        }else{
                                            alert('分享帖已删除');
                                        }
                                    },
                                    error: function (err) {

                                    }
                                });
                            }else if(data.sourceId  && data.msgSourceType === 'groupMsg'){
                                $.ajax({
                                    url: '/community/forumgroup/selectGroupDetail?groupId=' + data.sourceId,
                                    type: 'GET',
                                    cache: false,
                                    success:function (resp) {
                                        if(resp.success) {
                                            $('.group').css('display','block');
                                            $('.groupName').html(resp.data.groupName);
                                            var obj = {'10000':'公开','10001':'封闭','10002':'私密'};
                                            $('.groupType').html(obj[resp.data.privacySetting] + "群组&nbsp;&nbsp;");
                                            $('.groupNumber').html(resp.data.memberCount + "位成员");
                                        }else{
                                            alert('分享帖已删除');
                                        }
                                    },
                                    error: function (err) {

                                    }
                                });
                            }
                        }
                        $.ajax({
                            url: '/community/forumcomment/getForumcommentByForumMsgId?offset=0&limit=100&forumMsgId=' + forumMsgId + '&userId=' + data.userId,
                            type: 'GET',
                            cache: false,
                            success:function (resp) {
                                console.log(resp);
                                getComment(resp.data);
                            },
                            error: function (err) {

                            }
                        });
                    }else{
                        $('.main').css('height', '650px').html("<div style='text-align: center;'><img style='height: 200px;' src='http://youdoneed-test.oss-cn-shenzhen.aliyuncs.com/165fa66uhrq1srgzj37b.jpg' alt=''><p style='margin-top: 0.5rem;font-size: 20px;'>帖子已删除</p></div>");
                    }
                },
                error: function (err) {

                }
            });
        };

        function updata(data, element) {
            if(!data) {
                alert("数据不存在");
            }
            element ? element : 'resourceContent';
            $("."+element+" ul").empty();
//            渲染媒体资源
            if(data.listForummediaresource.length > 0 && data.listForummediaresource != null){
                $("."+element).css('display','block');
            } else {
                $("."+element).css('display','none');
            }
            for (var i = 0; i < data.listForummediaresource.length; i++) {
                var template = $("#reasource").clone().html();
                var info = data.listForummediaresource[i];
                if (info.mediaType === 'music') {
                    var html = template.replace('reasourceName', info.songName+'-'+info.singerName);
                    html = html.replace('reasourceImg',"<span class='jFiler-icon-file f-audio'><i class='icon-jfi-file-audio'></i></span>");
                    $("."+element+" ul").append(html);
                } else if (info.mediaType === 'video' || info.mediaType === 'shortVideo') {
//                    var html = template.replace('reasourceName', '');
//                    html = html.replace('reasourceImg',"<span class='jFiler-icon-file f-audio'><i class='icon-jfi-file-video'></i></span>");
//                    html = html.replace("reasourceImg", "<video controls src="+info.videoUrl+" style='height: 100%;width: 100%;'></video>");
                    var html = "<li><video controls src="+info.videoUrl+" style='height: 100%;width: 100%;'></video></li>"
                    $("."+element+" ul").append(html);
                } else {
                    var html = template.replace('reasourceName', '');
                    html = html.replace('reasourceImg',"<img src="+(info.image_url ? info.image_url : info.imageUrl)+">");
                    $("."+element+" ul").append(html);
                }
            }
        };

        function getComment(data) {
            //如果有评论
            if(data && data.rows.length>0){
                $(".commentBody").remove();
                $(".comment .commentNum").html("当前"+data.total+"条评论");
                var comment = data.rows;
                for(var i = 0;i < comment.length; i++){
                    var temp = $("#commentTemp").clone().html();
                    //评论用户昵称
                    var html = temp.replace("用户昵称01", comment[i].userNickname);
                    //用户头像
                    html = html.replace("image/headerImg03.png", comment[i].userHeadUrl);
                    //评论时间
                    html = html.replace("10分钟前", timeChange(comment[i].createDate));
                    //评论内容
                    html = html.replace("content1", comment[i].content);
                    //点赞数
                    html = html.replace("likeNum", comment[i].likesCount == null?0:comment[i].likesCount);
                    //评论图片
                    if(comment[i].commentPicUrl) {
                        html = html.replace("defaultImg",comment[i].commentPicUrl);
                    } else {
                        html = html.replace("commentImg","commentImg hidden");
                    }
                    //如果存在子评论
                    if(comment[i].listForumcomment.length>0){
                        var commentList = comment[i].listForumcomment;
                        var text = '';
                        for(var j = 0;  j< commentList.length; j++) {
                            text += "<div class='subComment'><p class='title'>"+commentList[j].userNickname+"<span style='font-size: 12px;'>回复</span>"+comment[i].userNickname+"</p><p class='text' style='font-size: 14px;padding-left: 20px;'>"+commentList[j].content+"</p></div>";
                        };
//                        text += "<p class='commentCount'>共"+commentList.length+"条回复<i class='icon iconfont1 icon-xiangyou'></i></p>"
                        html = html.replace("回复",text);
                    }else {
                        html = html.replace("reply","reply hidden");
                        // $('.reply').remove();
                    };
                    $('.empty').before(html);
//                    var height = $(".commentBody").eq(i).find(".subComment:first-child").height();
//                    if(height) {
//                        $(".commentBody").eq(i).find(".reply").height(height+30)
//                    };
                };
            }else{
                $('.comment').empty();
                $('.comment').append("<h4>评论</h4><div class='NoComment'><img src='image/empty.jpg'></div><p class='NoCommetText'>还没有人评论，有些寂寞</p>");
            }
        }

        /*
         *  timeChange时间格式化方法
         *  @param time 要格式化的时间，格式为1990-01-01
         */
        function timeChange(time) {
            var timestamp1 = Date.parse(new Date());
            var timestamp2 = Date.parse(time.replace(/-/g, "/"));
            if((timestamp1 - timestamp2) >= 86400000) {
                return time;
            }else if( 86400000 > (timestamp1 - timestamp2) && (timestamp1 - timestamp2) >= 3600000) {
                return Math.floor((timestamp1 - timestamp2)/3600000) > 24 ? time : Math.floor((timestamp1 - timestamp2)/3600000)+"小时前";
            }else if( 3600000 > (timestamp1 - timestamp2) && (timestamp1 - timestamp2) >= 600000) {
                return Math.floor((timestamp1 - timestamp2)/60000) > 60 ? time : Math.floor((timestamp1 - timestamp2)/60000)+"分钟前";
            }else{
                return '刚刚'
            }
        }

    </script>
</body>
</html>